<template>
  <div>
    <v-content-layout @search="search">
      <template #searchFold>
        <v-search-item label="名称">
          <a-input v-model:value="searchForm.name" placeholder="请输入应用名称" />
        </v-search-item>
        <v-search-item label="编号">
          <a-input v-model:value="searchForm.appCode" placeholder="请输入应用编号" />
        </v-search-item>
        <v-search-item label="路径">
          <a-input v-model:value="searchForm.baseUrl" placeholder="请输入应用路径" />
        </v-search-item>
      </template>
      <template #handleBtn>
        <a-button type="primary" @click="addApp">添加</a-button>
      </template>
      <template v-slot:table="{ height }">
        <a-table
          rowKey="id"
          :scroll="{ y: height }"
          :pagination="false"
          :data-source="listData"
          :columns="tableColumns"
        >
          <template v-slot:operation="{ record }">
            <a-button type="link" @click="editApp(record)">编辑</a-button>
            <a-button type="link" @click="deleteApp(record)">删除</a-button>
          </template>
        </a-table>
      </template>
      <template #pagination>
        <v-pagination :total="total"></v-pagination>
      </template>
    </v-content-layout>
    <!--  弹框组件  -->
    <add v-if="addVisible" v-model:visible="addVisible" :init-form="editForm" @close="getList"></add>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'system-permission'
  }
</script>
<script setup lang="ts">
import { tableColumns } from './config';
import { ref, reactive, onMounted } from 'vue';
import add from './add.vue'

import useCurrentInstance from 'lib-utils/vueInstance'
const { proxy } = useCurrentInstance()

let total = ref(0)
let addVisible = ref(false)
let editForm = ref(null)

const searchForm = reactive({
  currentNum: 1,
  pageSize: 10,
  name: '',
  appCode: '',
  baseUrl: ''
})
let listData = ref([])

onMounted(() => {
  getList()
})

const getList = () => {
  proxy.$http.get(proxy.$api.role.list, searchForm).then((res:any) => {
    listData.value = res.dataList
    total.value = res.total
  }).catch(() => {
  })
}

const search = () => {
  getList()
}

const addApp = () => {
  addVisible.value = true
}

const editApp = (record:any) => {
  editForm.value = record
  addVisible.value = true
}

const deleteApp = (record:any) => {
  proxy.$http.post(proxy.$api.application.delete, {
    id: record.id
  }).then(() => {
    getList()
  }).catch(() => {
  })
}
</script>

<style lang="less" scoped></style>